<template>
  <div class="home-container">
    <el-card class="welcome-card">
      <template #header>
        <div class="card-header">
          <span>欢迎使用 Vue3 Element Admin</span>
        </div>
      </template>
      <div class="welcome-content">
        <div class="welcome-message">
          <h1>🎉 欢迎来到管理系统</h1>
          <p>这是一个基于 Vue3、Element Plus、Vue Router 和 Pinia 构建的现代化管理系统模板</p>
        </div>
        <div class="system-info">
          <el-row :gutter="20">
            <el-col :span="6">
              <el-statistic :value="systemStats.users" :precision="0" :suffix="' 用户'" />
            </el-col>
            <el-col :span="6">
              <el-statistic :value="systemStats.visits" :precision="0" :suffix="' 访问'" />
            </el-col>
            <el-col :span="6">
              <el-statistic :value="systemStats.products" :precision="0" :suffix="' 产品'" />
            </el-col>
            <el-col :span="6">
              <el-statistic :value="systemStats.sales" :precision="0" :suffix="' 销售额'" />
            </el-col>
          </el-row>
        </div>
        <div class="quick-actions">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-button type="primary" class="action-button" icon="el-icon-user">用户管理</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="success" class="action-button" icon="el-icon-s-goods">产品管理</el-button>
            </el-col>
            <el-col :span="8">
              <el-button type="warning" class="action-button" icon="el-icon-shopping-cart">订单管理</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <el-row :gutter="20" class="content-row">
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>销售趋势</span>
            </div>
          </template>
          <div class="chart-container">
            <div style="height: 300px;">
              <canvas ref="salesChart"></canvas>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="recent-activities">
          <template #header>
            <div class="card-header">
              <span>最近活动</span>
            </div>
          </template>
          <el-timeline>
            <el-timeline-item v-for="(activity, index) in recentActivities" :key="index">
              <el-card>{{ activity.content }}</el-card>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>
    </el-row>

    <!-- API 测试组件 -->
    <el-card class="api-test-card">
      <ApiTest />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '../stores/user'
import ApiTest from '../components/ApiTest.vue'
// import Chart from 'chart.js/auto'

// 定义组件名称
defineOptions({
  name: 'Home'
})

const userStore = useUserStore()
const salesChart = ref(null)
let chartInstance = null

// 系统统计数据
const systemStats = {
  users: 1240,
  visits: 24600,
  products: 580,
  sales: 125800
}

// 最近活动数据
const recentActivities = [
  { content: '系统更新完成，版本 v1.0.1' },
  { content: '新增用户管理模块' },
  { content: '修复了订单统计bug' },
  { content: '优化了数据加载性能' },
  { content: '添加了产品分类功能' }
]

// 初始化图表
const initChart = () => {
  if (!salesChart.value) return

  // 销毁已存在的图表实例
  if (chartInstance) {
    chartInstance.destroy()
  }

  // 图表数据
  const ctx = salesChart.value.getContext('2d')
  chartInstance = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
      datasets: [
        {
          label: '销售额',
          data: [12000, 19000, 15000, 28000, 22000, 30000],
          borderColor: '#409eff',
          backgroundColor: 'rgba(64, 158, 255, 0.1)',
          tension: 0.3,
          fill: true
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: 'top'
        }
      },
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  })
}

// 组件挂载时初始化
onMounted(() => {
  // 如果未登录，加载模拟用户信息
  if (!userStore.isLoggedIn) {
    userStore.login({
      userInfo: {
        id: '1',
        name: '管理员',
        avatar: '',
        role: 'admin'
      },
      token: 'mock-token'
    })
  }
  
  // 初始化图表
  setTimeout(() => {
    // initChart()
  }, 100)
})

// 组件卸载时销毁图表
onUnmounted(() => {
  if (chartInstance) {
    chartInstance.destroy()
  }
})
</script>

<style scoped>
.home-container {
  width: 100%; 
}

.welcome-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.welcome-content {
  padding: 20px 0;
}

.welcome-message {
  text-align: center;
  margin-bottom: 30px;
}

.welcome-message h1 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 10px;
}

.welcome-message p {
  font-size: 16px;
  color: #606266;
}

.system-info {
  margin-bottom: 30px;
}

.quick-actions {
  margin-top: 20px;
}

.action-button {
  width: 100%;
}

.content-row {
  margin-bottom: 20px;
}

.chart-card,
.recent-activities {
  height: 100%;
}

.chart-container {
  height: 300px;
}

.el-timeline {
  padding: 10px 0;
}

.el-timeline-item {
  margin-bottom: 15px;
}

.el-timeline-item .el-card {
  margin-left: 15px;
}
</style>